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ing, programming technology, system modelling and management techniques, and 
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Abstract 



This report describes zippers, an application of outline-processor technology to the 
display of Web pages. Zippers allow users to expand and contract selected sections 
of a document, thereby displaying simultaneously the contents of individual sec- 
tions of a document as well as its overall structure. Zippers can be implemented ei- 
ther directly in a Web browser or by a proxy (and consequently used by any off-the- 
shelf Web browser); in either case, no changes to HTML source files are required. 



Overview 



As people rush to put information onto the World Wide Web, more and more struc- 
tured documents are appearing. These documents include home pages with lots 
of hierarchically organized links, papers with many sections and subsections, and 
other lengthy documents such as books and manuals. 

All Web browsers that we know of display each page as a continuous scroll. 
Unfortunately, it is easy to lose context when viewing a snippet of the whole, and it 
is hard to jump to arbitrary places in the page. These problems become more severe 
with longer pages. 

Outline processors provide one well known technique for addressing these prob- 
lems. Outline processors allow a user to expand and contract selected sections and 
subsections of a document, thus retaining the high-level structure of the document 
while also displaying individual sections. In addition, outline processors allow the 
user to rapidly jump within the document. This report describes the application of 
outline processor technology to the display of Web pages. 

Zippers 

Our display of Web pages infers an outline structure from the heading tags (i.e., 
HI, H2, . . . , H6) in the HTML source. We mark each heading with an icon called 
a zipper. Clicking on the zipper causes the section introduced by the heading to 
expand and contract. Re-expanding a section causes the state of all subsections to 
reappear as they were before the section was contracted. However, shift-clicking on 
a zipper icon causes the section and all of its subsections to expand or to contract. 

The screen dumps on the next pages shows a Web page using Netscape (the 
left-side page) and using zippers (the right-side page). The zipper display is within 
the WebCard browser, an integrated system for handling e-mail messages, bboard 
articles, and Web pages [3]. 
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The screen dump above shows the SRC home page. The page contains a level- 1 
heading (a graphic with the letters SRC followed by "Systems Research Center"), 
some text, and then four level-2 headings. The top screen dump on the facing page 
is the default display with zippers: The single level-1 heading is automatically ex- 
panded, thereby causing the text it contains and any subheaders to be displayed. 
By default, subheaders are displayed contracted. In the bottom screen dump on the 
facing page, we've expanded the second and third subheaders. 
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The screen dump above shows a large document, "A Beginner's Guide to HTML" 
by NCSA [1]. (We edited the page to add section numbers, in order to facilitate the 
description of zippers.) The Netscape display is 21 screens of information, scrolled 
to the spot just before section "3.1 The Minimal HTML Document." The screen 
dumps on the facing page show the same document, with zippers, scrolled to about 
the same location. In the top screen dump, we've expanded section "3 Creating 
HTML Documents" of the default zipper display. The contents of the section are 
displayed ("HTML documents . . . screen display."), and the three subsections are 
visible in their contracted form. In the bottom screen dump, we've expanded three 
more sections: "3.2 Basic Markup Tags," and then "3.2.2 Headings" (which only 
became visible after "3.2 Basic Markup Tags" was expanded), and finally "3.3 Link- 
ing to Other Documents." 
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Discussion 



Zippers work well on Web pages that use heading tags to indicate the logical struc- 
ture of the page. Unfortunately, many authors use heading tags to produce particular 
formatting effects, such as font and pointsize changes, rather than indicate logical 
structure. On such pages, users simply turn off the zippers and the page is displayed 
conventionally. 

We know of one Web site that has hand-coded zippers [7]. The drawback of 
hand coding zippers is that it requires server interaction to expand or contract, and 
an exponential number of files (or a complex script) to generate all states. 

Authors of long pages frequently add a table of contents to the top of the page, 
with entries in the table linking to the various sections. Sometimes, each section 
appears on its own page, with "next," "previous," "up," and "top" links on each 
page. Unfortunately, it is easy for the viewer to lose the big picture because the 
table of contents is not visible while looking at the contents of a particular section. 

An alternative to zippers for retaining the big picture while viewing the details 
is a multi-panel display, such as in SuperBook [2]. One panel displays the table of 
contents and the other panel displays sections in the document. Clicking on an entry 
in the table of contents causes the other panel to display the corresponding part of 
the document. The user can also open and close levels of the table of contents, but 
the body of a section is always displayed in the second panel. A multi-panel dis- 
play such as Superbook could be implemented using Netscape's frames, by adding 
appropriate HTML markups and Java code to a source document. 

Another related system is SoftQuad's Panorama Pro [6], which displays SGML 
documents using a two-panel viewer similar to that of SuperBook. Panorama Pro 
is also loosely integrated with the Web: The application can be configured as an 
external viewer of documents whose MIME type is SGML. Clicking on a URL in 
a document displayed by Panorama Pro will cause Netscape (or some other user- 
specified browser) to fetch and display the URL. Electronic Book Technologies' 
DynaText [4] is another impressive SGML viewer; it is integrated into Netscape as 
a plug-in. It's important to realize, however, that Panorama Pro and DynaText are 
not Web browsers. 

Our decision to expand an outline view in place was inspired in part by Pad++ [5], 
a zooming graphical interface, and in part by the host of successful "context+focus" 
visualizations developed at Xerox PARC. 

We are currently working on a proxy-based implementation of zippers that al- 
lows zipper-enhanced pages to be displayed in any Web browser. The idea is sim- 
ple: A "zipper proxy" runs on the same machine as the user's browser and sits be- 
tween the browser and the browser's normal proxy. The zipper proxy uses the nor- 
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mal proxy for fetching pages, and modifies the returned HTML to elide material 
and to include zipper icons. Each zipper icon is linked to a specially constructed 
URL that is intercepted by the zipper proxy and which allows the zipper proxy to 
return an appropriate view of the page. 

Conclusion 

Viewing a Web page using zippers has the nice property of allowing one to see de- 
tails of parts of the page while maintaining the global context of the entire page. The 
larger the Web page — or the smaller the vertical space available for the display — 
the more benefit there is to this technique. Putting this technology into a browser 
or into a proxy seems preferable to hand-coding it into each document. 
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